<template>
  <el-select
    multiple
    collapse-tags
    v-model="selectedArray"
    @change="changeSelect"
    @remove-tag="removeTag"
    placeholder="请选择"
  >
    <el-option label="全选" value="全选" @click.native="selectAll"></el-option>
    <el-option
      v-for="(item, index) in options"
      :key="index"
      :label="item[props.label]"
      :value="item[props.value]"
    ></el-option>
  </el-select>
</template>

<script>
export default {
  components: {},
  props: {
    props: Object,
    options: Array,
  },
  data() {
    return {
      selectedArray: [],
    };
  },
  watch: {},
  methods: {
    selectAll() {
      if (this.selectedArray.length < this.options.length) {
        this.selectedArray = [];
        this.options.map((item) => {
          this.selectedArray.push(item[this.props.value]);
        });
        this.selectedArray.unshift("全选");
      } else {
        this.selectedArray = [];
      }
      this.$emit("return", this.selectedArray);
    },
    changeSelect(val) {
      if (!val.includes("全选") && val.length === this.options.length) {
        this.selectedArray.unshift("全选");
      } else if (val.includes("全选") && val.length - 1 < this.options.length) {
        this.selectedArray = this.selectedArray.filter((item) => {
          return item !== "全选";
        });
      }
      this.$emit("return", this.selectedArray);
    },
    removeTag(val) {
      if (val === "全选") {
        this.selectedArray = [];
      }
      this.$emit("return", this.selectedArray);
    },
  },
  created() {},
  mounted() {},
};
</script>
<style scoped lang='scss'>
</style>